<template>
  <div :id="id" :style="{ height:height,width:width }" />
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "270px",
    },
    data: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
    xAxisData:{
      type: Array,
      default: () => ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    },
    smooth: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chart: null,
      legendData: [],
      positiveData: [],
      middleData:[],
      negativeData:[]
    };
  },
  mounted() {
    this.getlegendData();
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart = null;
  },
  methods: {
    erchartResize(){
      echarts.init(document.getElementById(this.id)).resize();
    },
    getlegendData() {
      if (this.data.length === 0) {
        return;
      }
      this.legendData = [];
      this.data.forEach((item, index) => {
        this.legendData.push(item.name);
        if(item.name === "正向"){
          this.positiveData = item.data;
        } else if(item.name === "中立"){
          this.middleData = item.data;
        } else {
          this.negativeData = item.data;
        }
      });
      console.log("evhar:",this.data)
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      const option = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          top: "12%",
          right: "8%",
          left: "10%",
          bottom: "10%",
        },
        legend: {
          show: true,
          top: "5px",
          left: "center",
          icon: "roundRect",
          textStyle: {
            fontSize: 14,
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 26,
          data: this.legendData,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xAxisData,
          axisLine: {
            lineStyle: {
              color: "#919191",
              width: 0, //这里是为了突出显示加上的
            },
          },
          axisLabel:{
            width: '20px'
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#919191",
              width: 0, //这里是为了突出显示加上的
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "正向",
            data: this.positiveData,
            type: "line",
            areaStyle: {
              color: "#fff6eb",
            },
            lineStyle: {
              normal: {
                color: "#ffad3d",
              },
            },
            smooth: this.smooth,
          },
          {
            name: "中立",
            data: this.middleData,
            type: "line",
            areaStyle: {
              color: "#eaf1ef",
            },
            lineStyle: {
              normal: {
                color: "#3ebef8",
              },
            },
            smooth: this.smooth,
          },
          {
            name: "负向",
            data: this.negativeData,
            type: "line",
            areaStyle: {
              color: "#d5dfe0",
            },
            lineStyle: {
              normal: {
                color: "#7a919d",
              },
            },
            smooth: this.smooth,
          },
        ],
        color: ["#ffad3d", "#3ebef8", "#7a919d"],
      };
      this.chart.setOption(option);
    },
  },
  watch: {
    data: {
      handler(newVal, oldVal){
        console.log("监听：", newVal)
        if(this.chart){
          //销毁
          this.chart.dispose();
          if(newVal){
            this.initChart();
          } 
        } else{
          this.initChart();
        }
      },
      deep: true //对象内部属性的监听
    }
  }
};
</script>
